$tile-size: 150px;
$shutter-color: white;
$shutter-opacity: .3;
$error-margin: .02;

.shutter {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;

  pointer-events: none;
  opacity: $shutter-opacity;
}

.shutter-top {
  position: absolute;
  bottom: -$tile-size;
  left: -$tile-size;
  right: -$tile-size;
  top: -$tile-size;

  background: linear-gradient(45deg, $shutter-color 0% 20%, transparent 20% 50%, $shutter-color 50% 70%, transparent 70% 100%);
  background-size: $tile-size $tile-size;
  background-repeat: repeat;

  mask-image: linear-gradient(45deg, black 0% (20% + $error-margin * 100%), transparent (20% + $error-margin * 100%) 50%, black 50% (70% + $error-margin * 100%), transparent (70% + $error-margin * 100%) 100%);
  mask-size: $tile-size $tile-size;
  mask-repeat: repeat;
  mask-position: ($tile-size * .5 - ($error-margin)) 0px;

  transition: mask-position 1s ease;

  .shutter.shutter-open & {
    mask-position: ($tile-size * -$error-margin) 0px;
  }
}

.shutter-middle {
  @extend .shutter-top;
  transform: translateY($tile-size/3);
}

.shutter-bottom {
  @extend .shutter-top;
  transform: translateY($tile-size * 2/3);
}
